<template>
  <el-tabs v-if="messageOpen" v-model="tabName">
    <el-tab-pane :name="tabNames[0]" :label="$t('loc.sendGroup')">
      <message-create/>
    </el-tab-pane>
    <el-tab-pane v-if="false" :name="tabNames[1]" :label="$t('loc.sendRecord')">
       <message-history v-if="tabName === tabNames[1]"/>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import {acrossRole} from "@/utils/common";
import {mapState} from "vuex";
import MessageCreate from "@/views/modules/message/MessageCreate/MessageCreate";
import MessageHistory from "@/views/modules/message/MessageHistory/MessageHistory";

export default {
  name: "SchoolMessage",
  components: { MessageCreate, MessageHistory },
  props: ['submoduleName'],
  computed: {
    ...mapState({
      currentUser: state => state.user.currentUser, // 当前用户
    }),
    messageOpen() {
      return true
      let {message_open} = this.currentUser || {};
      return acrossRole('SCHOOL_ADMIN', 'agency_admin', 'agency_owner') || message_open;
    },
  },
  data() {
    return {
      tabNames: ['SchoolMessage', 'MessageHistory'],
      tabName: this.submoduleName || 'SchoolMessage'
    }
  },
  watch:{
    // 监听tab变化，进行路由跳转
    tabName (newVal, oldVal) {
      if (newVal === 'SchoolMessage') {
        this.$router.push({ name: 'SendSchoolMessage' })
      } else if (newVal === 'MessageHistory') {
        this.$router.push({ name: 'SchoolMessageHistory' })
      }
    }
  }
}
</script>

<style scoped lang="less">
.el-tabs /deep/ & {
  & > .el-tabs__header {
    margin: 0;
    background-color: #e4eaec;

    .el-tabs__nav-wrap::after {
      display: none;
    }

    .el-tabs__nav {
      float: none;
      text-align: center;
    }

    .el-tabs__item {
      padding: 0;
      margin: 0 40px;
      line-height: 50px;
      font-size: 18px;
      height: auto;
    }
  }

  & > .el-tabs__content {
    height: calc(100% - 52px);

    & > :first-child {
      height: 100%;
    }
  }
}

#pane-MessageHistory {
  height: 100%;
}
</style>